Top React Hooks — Outside Clicks and Dimensions

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Cool Dimensions

React Cool Dimensions lets us watch the dimension of a component.

To use it, we install it by running:

yarn add react-cool-dimensions

or

npm install --save react-cool-dimensions

Then we can use it by writing:

import React from "react";
import useDimensions from "react-cool-dimensions";

export default function App() {
  const { ref, ...dimensions } = useDimensions({
    onResize: ({ width, height, entry, unobserve, observe }) => {
      //...
    }
  });
  return (
    <div className="App">
      <div ref={ref}>{JSON.stringify(dimensions)}</div>
    </div>
  );
}

We use the useDimensions hook which returns the ref that we can assign to the element we want to watch the size for.

Then dimensions has the object with width and height of the element we’re watching.

onResize is a method that runs when we resize the element.

We can also assign breakpoints so the hook can determine the breakpoint when watching the element size.

For instance, we can write:

import React from "react";
import useDimensions from "react-cool-dimensions";

export default function App() {
  const { ref, ...dimensions } = useDimensions({
    breakpoints: { XS: 0, SM: 320, MD: 480, LG: 640 },
    onResize: ({ currentBreakpoint }) => {
      console.log(currentBreakpoint);
    }
  });
  return (
    <div className="App">
      <div ref={ref}>{JSON.stringify(dimensions)}</div>
    </div>
  );
}

We added the breakpoints property to get the breakpoints according to what we assigned.

All the dimensions are in pixels.

We can include the border size with the measurement.

For instance, we can write:

import React from "react";
import useDimensions from "react-cool-dimensions";

export default function App() {
  const { ref, ...dimensions } = useDimensions({
    useBorderBoxSize: true
  });
  return (
    <div className="App">
      <div
        ref={ref}
        style={{
          border: "5px solid grey"
        }}
      >
        {JSON.stringify(dimensions)}
      </div>
    </div>
  );
}

Then the border is included with the measurements.

To throttle the watching, we can throttle the onResize callback calls with the Lodash throttle method.

We can also create our own ref and pass it into the useDimensions hook’s object argument’s ref property.

React Cool Onclickoutside

React Cool Onclickoutside lets us detect clicks outside an element.

To install it, we run:

yarn add react-cool-onclickoutside

or:

npm install --save react-cool-onclickoutside

Then we can use it by writing:

import React from "react";
import useOnclickOutside from "react-cool-onclickoutside";

export default function App() {
  const [openMenu, setOpenMenu] = React.useState(false);
  const ref = useOnclickOutside(() => {
    setOpenMenu(false);
  });

  const handleClickBtn = () => {
    setOpenMenu(!openMenu);
  };

  return (
    <div>
      <button onClick={handleClickBtn}>Button</button>
      {openMenu && <div ref={ref}>Menu</div>}
    </div>
  );
}

useOnclickOutside is the hook that comes with the package to detect clicks outside an element.

It returns a ref which we can pass into the ref prop of the element we want to watch the clicks outside for.

Now when we click outside the menu div, the menu will disappear.

Conclusion

React Cool Dimensions lets us watch the dimensions of our elements.

React Cool Onclickoutside lets us detect clicks that are outside an element.